
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>MET</title>
<link href="../../../public/stylesheets/style_sheet.css"
	rel="stylesheet" type="text/css" />

<!-- JAVA SCRIPT PARTIOTION START -->




<script src="../../../public/javascripts/jquery.ui.all.js" type="text/javascript"></script>
<script src="../../../public/javascripts/jquery.jgrowl.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../../public/javascripts/jquery.jgrowl.css" type="text/css"/>
		<style type="text/css">

			div.jGrowl div.manilla {
				background-color: 		#FFF1C2;
				color: 					navy;
			}

			div.jGrowl div.smoke {
				background: url(smoke.png) no-repeat;
				-moz-border-radius: 	0px;
				-webkit-border-radius:	0px;
				width: 					280px;
				height: 				55px;
				overflow: 				hidden;
			}

			div.jGrowl div.flora {
				background: 			#E6F7D4 url(flora-notification.png) no-repeat;
				-moz-border-radius: 	0px;
				-webkit-border-radius:	0px;
				opacity: 				1;
				filter: 				alpha(opacity = 100);
				width: 					270px;
				height: 				90px;
				padding: 				0px;
				overflow: 				hidden;
				border-color: 			#5ab500;
			}

			div.jGrowl div.flora div.message {
				padding: 				5px;
				color: 					#000;
			}

			div.jGrowl div.flora div.header {
				background: 			url(flora-header.png) no-repeat;
				padding: 				5px;
			}

			div.jGrowl div.flora div.close {
				background: 			url(flora-close.png) no-repeat;
				padding: 				5px;
				color: 					transparent;
				padding: 				0px;
				margin: 				5px;
				width:					17px;
			}

			div.jGrowl div.iphone {
				font-family: 			"Helvetica Neue", "Helvetica";
				font-size: 				12px;
				background: 			url(iphone.png) no-repeat;
				-moz-border-radius: 	0px;
				-webkit-border-radius:	0px;
				opacity: 				.90;
				filter: 				alpha(opacity = 90);
				width: 					245px;
				height: 				137px;
				padding: 				0px;
				overflow: 				hidden;
				border-color: 			#5ab500;
				color: 					#fff;
			}

			div.jGrowl div.iphone div.message {
				padding-top: 			0px;
				padding-bottom: 		7px;
				padding-left: 			15px;
				padding-right: 			15px;
			}

			div.jGrowl div.iphone div.header {
				padding: 				7px;
				padding-left: 			15px;
				padding-right: 			15px;
				font-size: 				17px;
			}

			div.jGrowl div.iphone div.close {
				display: 				none;
			}

			div#random {
				width: 					1000px;
				background-color: 		red;
				line-height: 			60px;
			}

		</style>
		<script type="text/javascript" src="../../../public/javascripts/jquery-1.4.2.js"></script>
		<script type="text/javascript" src="../../../public/javascripts/jquery.ui.all.js" ></script>
<script  type="text/javascript" src="../../../public/javascripts/jquery.jgrowl.js"></script>


<script type="text/javascript">
    //plugin found on the internet
	$(document).ready(function() {
 updateList()
 $('#NotificationListB').hide();

        });
</script>
<script type="text/javascript">
    //plugin found on the internet
	function updateList(){

		//Adjust panel height
		$.fn.adjustPanel = function() {
			$(this).find("ul, .subpanel").css({
				'height' : 'auto'
			}); //Reset subpanel and ul height

			var windowHeight = $(window).height(); //Get the height of the browser viewport
			var panelsub = $(this).find(".subpanel").height(); //Get the height of subpanel
			var panelAdjust = windowHeight - 100; //Viewport height - 100px (Sets max height of subpanel)
			var ulAdjust = panelAdjust - 25; //Calculate ul size after adjusting sub-panel (27px is the height of the base panel)

			if (panelsub >= panelAdjust) { //If subpanel is taller than max height...
				$(this).find(".subpanel").css({
					'height' : panelAdjust
				}); //Adjust subpanel to max height
				$(this).find("ul").css({
					'height' : ulAdjust
				}); //Adjust subpanel ul to new size
			} else if (panelsub < panelAdjust) { //If subpanel is smaller than max height...
				$(this).find("ul").css({
					'height' : 'auto'
				}); //Set subpanel ul to auto (default size)
			}
		};

		//Execute function on load
		$("#chatpanel").adjustPanel(); //Run the adjustPanel function on #chatpanel
		$("#alertpanel").adjustPanel(); //Run the adjustPanel function on #alertpanel

		//Each time the viewport is adjusted/resized, execute the function
		$(window).resize(function() {
			$("#chatpanel").adjustPanel();
			$("#alertpanel").adjustPanel();
		});

		//Click event on Chat Panel + Alert Panel
		$("#chatpanel a:first, #alertpanel a:first").click(function() { //If clicked on the first link of #chatpanel and #alertpanel...
			if ($(this).next(".subpanel").is(':visible')) { //If subpanel is already active...
				$(this).next(".subpanel").hide(); //Hide active subpanel
				$("#footpanel li a").removeClass('active'); //Remove active class on the subpanel trigger
			} else { //if subpanel is not active...
				$(".subpanel").hide(); //Hide all subpanels
				$(this).next(".subpanel").toggle(); //Toggle the subpanel to make active
				$("#footpanel li a").removeClass('active'); //Remove active class on all subpanel trigger
				$(this).toggleClass('active'); //Toggle the active class on the subpanel trigger
			}
			return false; //Prevent browser jump to link anchor
		});

		//Click event outside of subpanel
		$(document).click(function() { //Click anywhere and...
			$(".subpanel").hide(); //hide subpanel
			$("#footpanel li a").removeClass('active'); //remove active class on subpanel trigger
		});
		$('.subpanel ul').click(function(e) {
			e.stopPropagation(); //Prevents the subpanel ul from closing on click
		});

		//Delete icons on Alert Panel
		$("#alertpanel li").hover(function() {
			$(this).find("a.delete").css({
				'visibility' : 'visible'
			}); //Show delete icon on hover
		}, function() {
			$(this).find("a.delete").css({
				'visibility' : 'hidden'
			}); //Hide delete icon on hover out
		});
        }
	
</script>
<script type="text/javascript">
	function showNotificationsNotification() {



		$
				.getJSON(
						'@{usersController.DisplayNotificationPopID()}',

											{
							'userName' : "username"
						},
						function(data) {
							if (data != null
									&& data.result == "sizeNotEqualZero" && data.NoNewNotification=="no") {
                                                      
                                                                         $('#two').jGrowl(data.list);
                                                                         
                                                                        } else {
                                                                            

								alert("No Notifications available ");						}
						});
	}
</script>
<script type="text/javascript">
    function showmsg() {
  $('#two').jGrowl('Bottom Left Positioning');
    }
</script>
<script type="text/javascript">
	function showNotificationsBID() {
 
$('#NotificationListB').fadeIn(2000);

		$
				.getJSON(
						'@{usersController.DisplayNotificationSID()}',

											{
							'userName' : "username"
						},
						function(data) {
							if (data != null
									&& data.result == "sizeNotEqualZero") {
								var list = {};
								list = data.list.split("&&");

								var total = "<h3><span>&ndash; </span>Notifications</h3><ul>";
//<p><a href='#' onclick=\"show_iDev('"+ innerList[0]+ "')\">"+ innerList[0]+ "</a> "+innerList[1]+"</p>

                                                                for ( var i = 0; i < list.length-1; i = i + 1) {

									var innerList = {};
									innerList = list[i].split(",,,");
									total += "<li><p><a href='#' onclick=\"show_iDev('"+ innerList[0]+ "')\">"+ innerList[0]+ "</a> "+innerList[1]+"</p></li>";


								}
								total += "</ul>";
								document.getElementById("NotificationListB").innerHTML = total;
                                                               
							} else {
								alert("No Notifications available ");						}
						});
	}
</script>
<script type="text/javascript">
	function showNotificationsID() {



		$
				.getJSON(
						'@{usersController.DisplayNotificationSID()}',

											{
							'userName' : "username"
						},
						function(data) {
							if (data != null
									&& data.result == "sizeNotEqualZero") {
								var list = {};
								list = data.list.split("&&");

								var total = "<h3><span>&ndash; </span>Notifications</h3><ul><li class=\"view\"><a href=\"#\">View All</a></li>";
//<p><a href='#' onclick=\"show_iDev('"+ innerList[0]+ "')\">"+ innerList[0]+ "</a> "+innerList[1]+"</p>

                                                                for ( var i = 0; i < list.length-1 && i<5; i = i + 1) {

									var innerList = {};
									innerList = list[i].split(",,,");
									total += "<li><a href=\"#\" class=\"delete\">X</a><p><a href='#' onclick=\"show_iDev('"+ innerList[0]+ "')\">"+ innerList[0]+ "</a> "+innerList[1]+"</p></li>";


								}
								total += "</ul>";
								document.getElementById("notificationS").innerHTML = total;
                                                                updateList()
							} else {
								alert("No Notifications available ");						}
						});
	}
</script>


<body>
    <div id="footpanel">
		<ul id="mainpanel">
			<li><a href="#" class="profile">View
					Profile <small>View Profile</small> </a>
			</li>
			<li><a href="#" class="editprofile">Edit
					Profile <small>Edit Profile</small> </a>
			</li>
			<li><a href="#" class="contacts">Contacts
					<small>Contacts</small> </a>
			</li>
			<li><a href="#" class="messages">Messages
					(10) <small>Messages</small> </a>
			</li>
			<li><a href="#" class="playlist">Play
					List <small>Play List</small> </a>
			</li>
			<li><a href="#" class="videos">Videos
					<small>Videos</small> </a>
			</li>
                        <li id="alertpanel"><a href="#" onClick="javascript:showNotificationsID()" class="alerts">Alerts</a>
				<div  id="notificationS" class="subpanel"  >
					<h3>
						<span>&ndash; </span>Notifications
					</h3>
					<ul>
						<li class="view"><a href="#">View All</a>
						</li>
						<li><a href="#" class="delete">X</a>
							<p>
								<a href="#">Sherif</a>has updated  <a href="#">his profile</a>.
							</p>
						</li>
						<li><a href="#" class="delete">X</a>
							<p>
								<a href="#">Ahmed </a>has commented on <a href="#">idea no1</a>.
							</p>
						</li>
						<li><a href="#" class="delete">X</a>
							<p>
								<a href="#">Kimo</a> has deleted the <a href="#">Met topic</a>.
							</p>
						</li>
						<li><a href="#" class="delete">X</a>
							<p>
								<a href="#">Osama </a> has added<a href="#">sherif</a> as a friend.
							</p>
						</li>
						<li><a href="#" class="delete">X</a>
							<p>
								<a href="#">Dina </a> has created a new entity <a href="#">@insert name</a>.
							</p>
						</li>

					</ul>
				</div>
			</li>
                        <li id="chatpanel"><a href="#" class="chat" onClick="javascript:updateList()">Friends (<strong>18</strong>)
			</a>
				<div class="subpanel">
					<h3>
						<span>&ndash; </span>Friends Online
					</h3>
					<ul>
						<li><span>Family Members</span>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><span>Other Friends</span>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
						<li><a href="#"><img
								src="../../../public/images/chat-thumb.gif"
								alt="" /> Your Friend</a>
						</li>
					</ul>
				</div>
			</li>
		</ul>
	</div>
	<div id="container">
		<div id="header">
			<h1>
				<a href="/">MEGAshare</a>
			</h1>
			<h2>Software ninjas</h2>
			<div class="clear"></div>
		</div>
		<div id="nav">
			<ul>
				<li><a
					href="index.html">Home</a>
				</li>
				<li><a href="#">Ideas</a></li>
				<li><a href="#">Organizations</a></li>
				<li><a href="#">Topics</a></li>
				<li><a href="#">Contact</a></li>
				<li><a href="#">About</a></li>
				<li class="nav-search">
					<form method="get" class="searchform" action="#">
						<p>
							<input type="text" size="24" value="" name="s" class="s" /> <input
								type="submit" class="searchsubmit formbutton" value="Search" />
						</p>
					</form>
				</li>
			</ul>
		</div>
		<div id="page-intro">
		</div>
		<div id="body">

			<div id="content">

				<input type="button"
					id="NotificationBTN" value="Show notifications "
					onclick="javascript:showNotificationsNotification()" />
                                        <input type="button"
					id="NotificationBTN" value="Show notifications big list "
					onclick="javascript:showNotificationsBID()" />

                                        <div id="NotificationListB" style="border: 1px solid #f0f0f0; ">cbcvbcvb</div>

				<p>&nbsp;</p>


			</div>

			<div class="sidebar">
				<ul>
					<li></li>

				</ul>
			</div>
            <div id ="footerplacement"style="height:328px ;width:0px;float:right;"></div>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<div class="clear"></div>
		</div>
	</div>
<div id="two" class="jGrowl bottom-left">
<div class="jGrowl-notification"></div>
</div>

	<div id="footer">
		<p>&copy; Megasoft 2011. Website Design by alot of PPL isA</p>
	</div>
    <input id="usercurrentHiddenInput" type="hidden" value="${usercurrent}" />
</body>

</html>
